<template>
  <div class="register-container">
    <div class="register-box">
      <el-form
        label-position="right"
        ref="registerFormRef"
        label-width="70px"
        :model="registerForm"
        :rules="registerRules"
        class="register-form"
        status-icon
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="registerForm.userName"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="registerForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="registerForm.confirmPassword"
          ></el-input>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('registerFormRef')"
            >注册</el-button
          >
          <el-button @click="toLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    var validateUserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };

    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>,.]).{8,12}$/;
        if (!reg.test(value)) {
          callback(
            new Error(
              "密码要求8-12位，必须包含大小写，特殊字符（-_!@#$%^&*~）以及数字"
            )
          );
        }
        callback();
      }
    };

    var checkPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认密码"));
      } else {
        if (value !== this.registerForm.password) {
          callback(new Error("两次输入密码不一致!"));
        }
        callback();
      }
    };

    return {
      registerForm: {
        userName: "",
        password: "",
        confirmPassword: ""
      },

      registerRules: {
        userName: [{ validator: validateUserName, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        confirmPassword: [{ validator: checkPassword, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      let registerData = {
        userName: this.registerForm.userName,
        password: this.registerForm.password
      };
      this.$refs[formName].validate(async valid => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          "/api/register",
          registerData
        );
        if (res.status === 200) {
          this.$message.success(res.msg);
          this.$router.push("/login");
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    toLogin() {
      this.$router.push("/login");
    }
  }
};
</script>
<style scoped>
.register-container {
  height: 100%;
  background-color: #2b4b6b;
}

.register-box {
  width: 450px;
  height: 300px;
  position: absolute;
  background-color: #fff;
  border-radius: 3px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.register-form {
  position: absolute;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}
</style>
